<template>
  <x-drawer :visible.sync="couponVisible" background="none" @cancel="closeCouponVisible">
    <view class="p-drawer">
      <view class="_header">
        <text class="_title">优惠券</text>
        <view class="icon" @click="closeCouponVisible">
          <x-icon name="icon-025" size="28" color="#C8C9CC"></x-icon>
        </view>
      </view>
      <scroll-view class="_scroll" scroll-y="true">
        <view class="_coupon" v-for="(item,index) in couponList" :key="index">
          <view class="list">
            <view class="_top">
              <view class="_lf">
                <view><text style="font-size: 14px;font-weight: bold;">¥</text><text style="font-size: 20px;font-weight: bold;">
                  {{ item.couponAmount }}</text></view>
                <view v-if="item.couponType === 1 && item.transactionAmount">满{{ item.transactionAmount }}可用</view>
                <view v-else>无门槛</view>
              </view>
              <view class="_rt">
                <view class="flex1">
                  <view class="_name">{{ item.couponType === 1 ? '满减券' : '直减券' }}</view>
                  <view class="_time">{{ item.startedAt }} 至 {{ item.expiredAt }}</view>
                </view>
                <view class="_btn">
                  <x-button v-if="item.couponType === 1 ? (couponLimitAmount >= item.transactionAmount) : true" size="medium" round="true" styles="padding: 0 8px;" @click="checkCoupon(item)">
                    立即使用
                  </x-button>
                  <x-button v-else disabled size="medium" round="true" styles="padding: 0 8px;" @click="checkCoupon(item)">
                    立即使用
                  </x-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </x-drawer>
</template>

<script>
import XDrawer from '@/components/x-drawer';
import XButton from '@/components/x-button';
import XIcon from '@/components/x-icon';

export default {
  name: 'PDrawerCheckCoupon',
  components: {
    XDrawer,
    XButton,
    XIcon
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    productTotalPrice: {
      type: String,
      default: ''
    },
    couponLimitAmount: {
      type: String,
      default: ''
    },
    couponList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      couponVisible: this.visible
    };
  },
  mounted() {
  },
  computed: {

  },
  watch: {
    productTotalPrice(old, val) {
      this.productTotalPrice = val;
    },
    couponLimitAmount(old, val) {
      this.couponLimitAmount = val;
    }
  },
  created() {
  },
  methods: {
    //  关闭分享弹框
    closeCouponVisible() {
      this.couponVisible = false;
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    //  使用优惠券
    checkCoupon(item) {
      this.couponVisible = false;
      this.$emit('update:visible', false);
      this.$emit('change', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-drawer{
  background: #FFFFFF;
  border-radius: 20px 20px 0px 0px;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%;
  min-height: 800px;
  max-height: 1000px;
  ._header {
    text-align: center;
    padding: 36px 40px;
    ._title {
      font-size: 32px;
      color: #323233;
    }
    .icon {
      float: right;
    }
  }
  ._scroll{
    min-height: 680px;max-height: 880px;

    ._coupon {
      width: 700px;
      background: #FFECEC;
      border-radius: 6px;
      margin: 0 auto;
      margin-bottom: 24px;

      .list {
        display: flex;
        flex-direction: column;
        //min-height: 216px;
        border-radius: 6px;
        background: #FFECEC;
        margin-bottom: 24px;
        overflow: hidden;

        ._top {
          display: flex;
          min-height: 152px;

          ._lf {
            width: 166px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            border-right: 1px dashed rgba(235, 68, 31, 0.4);
            padding: 48px 20px 36px 20px;
            font-size: 20px;
            color: $uni-color-primary;
          }

          ._lf:before {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background: #FFFFFF;
            right: -9px;
            top: -9px;
          }

          ._lf:after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background: #FFFFFF;
            right: -9px;
            bottom: -9px;
          }

          ._rt {
            //position: relative;
            flex: 1;
            display: flex;
            border-radius: 0px 6px 6px 0px;
            padding: 34px 36px 34px 16px;
            color: $uni-color-primary;
            font-size: 20px;
            align-items: center;

            ._name {
              font-weight: bold;
              font-size: 28px;
              margin-bottom: 12px;
            }

            ._btn {
              margin-top: 8px;
              margin-bottom: 6px;
              width: 144px;
              height: 64px;
              font-size: 28px;
              line-height: 64px;
              text-align: center;
              border-radius: 100px;
            }
          }
        }
      }
    }
    ._coupon:last-child{
      margin-bottom: 0;
    }
  }
}
</style>
